<template>
    <div>
        <!-- 复合题 -->
        <div v-if="question.qType === '复合题'" class="qu-Box">
            <p @click="copySourceId(question)" style="color: #1b74c7; cursor: pointer">来源:{{question.sourceId}}</p>
            <div class="qu-Box-content">
                <div class="qu-content">
                    <!-- 复合题主题干-->
                    <div class="title divs">
                        <span>{{ index1 + 1 }}、</span>
                        <span class="qty">【{{ question.qType }}】</span>
                        <div v-if="question.stem !== null && question.stem.length > 0">
                            <p v-for="(op,inx) in question.stem" :key="inx">
                                <img v-if="op.tp ==='img'"
                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                     alt="" width="80"/>
                                <audio v-else-if="op.tp === 'audio'"
                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                       controls="controls"></audio>
                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                            </p>
                        </div>
                        <span v-else v-html="question.stem">{{ question.stem }}</span>
                    </div>
                    <!-- 小题添加选项-->
                    <div v-show="!question.isShow" class="comb-btn">
                        <div v-show="isShowBtn">
                            <question-btn-box :index="index" :index1="index1" :fid="question.id" :question="question"
                                              size="mini"
                                              @open-question-dialog="openDialog(arguments)"></question-btn-box>
                        </div>
                    </div>
                    <!-- 小题盒子-->
                    <div v-show="!question.isShow" class="combination-Box">
                        <div v-for="(childItem,cindex) in question.children" :key="cindex">
                            <div class="comb-child-box">
                                <div class="comb-child-cont">
                                    <div class="title fontSize53">
                                        <span>{{ cindex + 1 }}、 </span>
                                        <span>【{{ childItem.qType }}】</span>
                                        <div v-if="childItem.stem.length > 0">
                                            <p v-for="(op,inx) in childItem.stem" :key="inx">
                                                <img v-if="op.tp === 'img'"
                                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                     alt="" width="80"/>
                                                <audio v-else-if="op.tp ==='audio'"
                                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                       controls="controls"></audio>
                                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div v-show="!childItem.isShow" class="divs fontSize53">
                                        <div v-if="childItem.qType === '单选题' || childItem.qType==='多选题' || childItem.qType === '不定项选择题'">
                                            <div v-for="(ccitem,ccindex) in childItem.options"
                                                 :key="ccindex" class="option">
                                                <div class="divs" style="display: flex">
                                                    <div style="width: 2%">{{ ccitem.option }}、</div>
                                                    <div v-for="(cconten,indexx) in ccitem.content" :key="indexx">
                                                        <img v-if="cconten.tp === 'img'"
                                                             :src="'https://vipcdn.langrundata.com/'+cconten.vl"
                                                             alt="" width="80"/>
                                                        <audio v-else-if="cconten.tp ==='audio'"
                                                               :src="'https://vipcdn.langrundata.com/'+cconten.vl"
                                                               controls="controls"></audio>
                                                        <span v-else v-html="cconten.vl">{{ cconten.vl }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="answer divs">
                                            <span class="mxw50">[答案]</span>
                                            <span v-if="childItem.qType === '判断题'" class="ans"> {{
                                                    childItem.answer === 1 ? "正确" : "错误"
                                                }}</span>
                                            <span v-for="(an,index3) in childItem.answer"
                                                  v-else-if="childItem.qType === '多选题'" :key="index3" class="ans">
                                                {{ an }}
                                            </span>
                                            <span v-for="(an,index3) in childItem.answer"
                                                  v-else-if="childItem.qType === '不定项选择题'" :key="index3" class="ans">
                                                {{ an }}
                                            </span>
                                            <span v-else-if="childItem.qType === '单选题'" class="ans">
                                                {{ childItem.answer }}
                                            </span>
                                            <div v-else-if="childItem.qType === '填空题' || childItem.qType === '问答题'">
                                                <div v-if="childItem.answer !== null">
                                                    <div v-for="(answerItem,indexa) in childItem.answer" :key="indexa">
                                                        <p v-for="(fia,fin) in answerItem.vl " :key="fin" class="ans">
                                                            <img v-if="fia.tp === 'img'"
                                                                 :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                                 alt="" width="80"/>
                                                            <audio v-else-if="fia.tp ==='audio'"
                                                                   :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                                   controls="controls"></audio>
                                                            <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div v-else>--</div>
                                            </div>

                                        </div>
                                        <div class="desc divs">
                                            <span class="mr5 mxw40">[解析]</span>
                                            <div
                                                v-if="childItem.answerDesc !== null && childItem.answerDesc.length > 0">
                                                <p v-for="(op,inx) in childItem.answerDesc" :key="inx">
                                                    <img v-if="op.tp ==='img'"
                                                         :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                         alt="" width="80"/>
                                                    <audio v-else-if="op.tp === 'audio'"
                                                           :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                           controls="controls"></audio>
                                                    <span v-else v-html="op.vl">{{ op.vl }}</span>
                                                </p>
                                            </div>
                                            <span v-else>--</span>
                                        </div>
                                        <div class="desc divs">
                                            <span>[难度]</span>
                                            <span>【{{
                                                    childItem.diff === "easy" ? "简单" : childItem.diff === "normal" ? "普通" : "困难"
                                                }}】</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="comb-child-edit divs">
                                    <div v-if="isShowBtn" class="combIcon">
                                        <span>{{ childItem.score }}分</span>
                                        <i class="el-icon-edit"
                                           @click="editCombQuestion(index,index1,cindex,childItem,question)"></i>
                                        <i class="el-icon-delete"
                                           @click="deleteCombQuestion(index,index1,cindex,childItem,question)"> </i>
                                        <span class="fontSize5">
                                                                <i v-if="childItem.isShow" class="el-icon-arrow-up"
                                                                   @click="openCombQuestion(index,index1,cindex)">展开</i>
                                                                <i v-else class="el-icon-arrow-down"
                                                                   @click="putAwayCombQuestion(index,index1,cindex)">收起</i>
                                                            </span>
                                    </div>
                                    <div v-else class="combIcon">
                                        <span>{{ childItem.score }}分</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="qu-edit divs">
                    <div v-if="isShowBtn" class="qu-Icon">
                        <span> {{ question.score === null ? "" : question.score + "分" }}</span>
                        <i class="el-icon-edit" @click="editQuestion(index,index1,question)"></i>
                        <i class="el-icon-delete" @click="deleteQuestion(index,index1,question)"> </i>
                        <span class="fontSize5">
                                                <i v-if="question.isShow" class="el-icon-arrow-up"
                                                   @click="openQuestion(index,index1)">展开</i>
                                                <i v-else class="el-icon-arrow-down"
                                                   @click="putAwayQuestion(index,index1)">收起</i>
                                            </span>
                    </div>
                    <div v-else class="qu-Icon">
                        <span>{{ question.score === null ? "" : question.score + "分" }}</span>
                    </div>
                </div>
            </div>
            <div class="qu-Box-btn">
            </div>
        </div>
        <div v-else class="qu-Box">
            <div class="qu-Box-content">
                <div class="qu-content">
                    <div class="title divs">
                        <span>{{ index1 + 1 }}、</span>
                        <span class="qty">【{{ question.qType }}】</span>
                        <div v-if="question.stem.length > 0">
                            <p v-for="(op,inx) in question.stem" :key="inx">
                                <img v-if="op.tp ==='img'"
                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                     alt="" width="80"/>
                                <audio v-else-if="op.tp === 'audio'"
                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                       controls="controls"></audio>
                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                            </p>
                        </div>
                        <span v-else v-html="question.stem">{{ question.stem }}</span>
                    </div>
                    <div v-show="!question.isShow" class="divs">
                        <div v-if="question.qType === '单选题' || question.qType === '多选题' || question.qType === '不定项选择题'">
                            <div v-for="(op,index2) in question.options" :key="index2" class="option">
                                <div class="divs" style="display: flex">
                                    <div v-if="op.option !== undefined" style="width: 2%">{{ op.option }}、</div>
                                    <div v-for="(cconten,indexx) in op.content" :key="indexx">
                                        <img v-if="cconten.tp === 'img'"
                                             :src="'https://vipcdn.langrundata.com/'+cconten.vl"
                                             alt="" width="80"/>
                                        <audio v-else-if="op.tp ==='audio'"
                                               :src="'https://vipcdn.langrundata.com/'+cconten.vl"
                                               controls="controls"></audio>
                                        <span v-else v-html="cconten.vl">{{ cconten.vl }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="answer divs">
                            <span class="mxw50">[答案] </span>
                            <span v-if="question.qType === '判断题'">
                                {{ question.answer === 1 ? "正确" : "错误" }}
                            </span>
                            <span v-for="(an,index3) in question.answer" v-else-if="question.qType === '多选题'|| question.qType === '不定项选择题'"
                                  :key="index3"
                                  class="ans">
                                {{ an }}
                            </span>
                            <span v-else-if="question.qType === '单选题'" class="ans">
                                {{ question.answer }}
                            </span>
                            <div v-else-if="question.qType === '填空题' || question.qType === '问答题'">
                                <div v-if="question.answer !== null">
                                    <div v-for="(answerItem,indexa) in question.answer" :key="indexa">
                                        <p v-for="(fia,fin) in answerItem.vl " :key="fin" class="ans">
                                            <img v-if="fia.tp === 'img'"
                                                 :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                 alt="" width="80"/>
                                            <audio v-else-if="fia.tp ==='audio'"
                                                   :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                   controls="controls"></audio>
                                            <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div v-else>--</div>
                            </div>
                        </div>
                        <div class="desc divs">
                            <span class="mr5 mxw40">[解析]</span>
                            <div v-if="question.answerDesc !== null && question.answerDesc.length > 0">
                                <p v-for="(op,inx) in question.answerDesc" :key="inx">
                                    <img v-if="op.tp ==='img'"
                                         :src="'https://vipcdn.langrundata.com/'+op.vl"
                                         alt="" width="80"/>
                                    <audio v-else-if="op.tp === 'audio'"
                                           :src="'https://vipcdn.langrundata.com/'+op.vl"
                                           controls="controls"></audio>
                                    <span v-else v-html="op.vl">{{ op.vl }}</span>
                                </p>
                            </div>
                            <span v-else>--</span>
                        </div>
                        <div class="desc divs">
                            <span>[难度]</span>
                            <span>【{{
                                    question.diff === "easy" ? "简单" : question.diff === "normal" ? "普通" : "困难"
                                }}】</span>
                        </div>
                    </div>
                </div>
                <div class="qu-edit divs">
                    <div v-if="isShowBtn" class="qu-Icon">
                        <span>{{ question.score }}分</span>
                        <i class="el-icon-edit" @click="editQuestion(index, index1, question)"></i>
                        <i class="el-icon-delete" @click="deleteQuestion(index,index1,question)"></i>
                        <span class="fontSize5">
                                                <i v-if="question.isShow" class="el-icon-arrow-up"
                                                   @click="openQuestion(index,index1)">展开</i>
                                                <i v-else class="el-icon-arrow-down"
                                                   @click="putAwayQuestion(index,index1)">收起</i>
                                            </span>
                    </div>
                    <div v-else class="qu-Icon">
                        <span>{{ question.score }}分</span>
                    </div>
                </div>
            </div>
            <div class="qu-Box-btn">
            </div>
        </div>
    </div>
</template>

<script>
import {questionComponents} from "@/views/models/exam/questionBase/question/mixins/question";
import QuestionBtnBox from "@/views/models/exam/questionBase/question/components/QuestionBtnBox";

export default {
    name: "ShowQuestionBox",
    components: {QuestionBtnBox},
    mixins: [questionComponents],
    props: {
        index: {
            type: Number,
            default: 0
        },
        index1: {
            type: Number,
            default: 0
        },
        question: {
            type: Object,
            default: () => {
            }
        },
        isShowBtn: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            isZk: false
        }
    },
    watch: {
        "question.isShow"(v) {
            console.log(v)
        },
        question() {
            console.log(111)
            console.log(this.question)
        }
    },
    created() {
        this.isZk = this.question.isShow
    },
    methods: {
        openDialog(data) {
            this.$emit("open-question-dialog", data[0], data[1], data[2], data[3], data[4])
        },
        copySourceId(data){
             navigator.clipboard.writeText(data.sourceId).then(res=>{
                 this.$message.success("复制成功");

             })

        },
        // 编辑试题
        editQuestion(index1, index2, question) {
            this.$emit("edit-question-dialog", question, index1, index2, -1);
        },
        // 删除试题
        deleteQuestion(index1, index2, question) {
            this.$emit("operate-question", "del", index1, index2, question, null);
        },
        // 收起试题
        putAwayQuestion(index1, index2) {
            this.$emit("operate-question", "put", index1, index2);
        },
        // 展开试题
        openQuestion(index1, index2) {
            this.$emit("operate-question", "open", index1, index2);
        },
        // 收起小试题
        putAwayCombQuestion(index1, index2, index3) {
            this.$emit("operate-question", "putChild", index1, index2, index3);
        },
        // 展开试题
        openCombQuestion(index1, index2, index3) {
            this.$emit("operate-question", "openChild", index1, index2, index3);
        },
        // 编辑试题
        editCombQuestion(index1, index2, index3, question, f_question) {
            console.log(f_question)
            this.$emit("edit-question-dialog", question, index1, index2, index3, f_question);
        },
        // 删除试题
        deleteCombQuestion(index1, index2, index3, question, f_question) {
            this.$emit("operate-question", "del", index1, index2, index3, question, f_question);
        },
    }
}
</script>

<style lang="scss" scoped>
.qu-Box {
    border: 1px solid #f1f1f1;
    padding: 0 0 12px 12px;
    border-radius: 8px;
    margin-top: 1em;

    .qty {
        min-width: 80px;
    }

    .mr5 {
        margin-right: 5px;
    }

    .mxw40 {
        min-width: 40px;
    }

    .mxw50 {
        min-width: 50px;
    }

    .ans {
        font-size: 14px;
        color: #1b74c7;
        line-height: 22px;
    }

    .qu-Box-content {
        display: flex;

        .qu-content {
            width: 86%;
            margin-top: 0.6em;

            .title {
                display: flex
            }

            .answer {
                display: flex
            }

            .comb-btn {
                margin-top: 0.8em;
                margin-bottom: 0.8em;
            }

            .option {
                font-size: 14px;
                text-indent: 2em;

                .not-choice {
                    width: 0.92rem;
                    min-width: 0.92rem;
                    height: 0.92rem;
                    border-radius: 50%;
                    border: 0.08rem solid #e5e8ec;
                }
            }

            .desc {
                font-size: 14px;
                color: #a1a1a1;
                display: flex
            }

            .combination-Box {
                background: #f7f7f7;
                border-radius: 8px;
                padding: 1px 2px 23px 32px;
                color: #198aff;

                .comb-child-box {
                    display: flex;

                    .comb-child-cont {
                        width: 86%;
                        margin-top: 0.6em;

                        .title span ::v-deep p img {
                            max-height: 60px;
                            max-width: 100px;
                        }
                    }
                }

                .comb-child-edit {
                    .combIcon {
                        i {
                            margin-left: 12px;
                            cursor: pointer;
                        }

                        margin-left: 0.5em;
                    }
                }
            }
        }
    }
}

.box-type {
    .type-title {
        display: flex;

        .type-name {
            width: 86%;
        }

        .type-btn-icon {
            color: #48c4ff;

            i {
                margin-left: 12px;
                cursor: pointer;
            }

            margin-left: 1em;
        }
    }

    .type-desc {
        color: #505353;
        font-size: 14px;
        line-height: 20px;
        margin-top: 1em;
    }
}

.qu-edit {
    .qu-Icon {
        i {
            margin-left: 12px;
            cursor: pointer;
        }

        margin-left: 1em;
    }
}

.divs {
    margin-top: 0.6em;

    span ::v-deep p img {
        max-height: 60px;
        max-width: 100px;
    }
}
</style>
